<template>
  <div>
    <p>请选择你要购买的书籍</p>
    <span>全选:</span>
    <input v-model="isAll" type="checkbox" id="check" />
    <ul>
      <li v-for="item in arr" :key="item.id">
        <input type="checkbox" id="check" v-model="item.c" />
        <span>{{ item.name }}</span>
        <input type="number" id="num" v-model="item.count" />
      </li>
    </ul>
    <table border="1" width="500" cellspacing="0">
      <tr>
        <th>序号</th>
        <th>书名</th>
        <th>单价</th>
        <th>数量</th>
        <th>合计</th>
      </tr>
      <tr v-for="item in arr" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.count }}</td>
        <td>{{ item.total }}</td>
      </tr>
    </table>
    <p>
      总价格为:<i>{{ totalPrice }}￥</i>
      <button @click="buy()">结算</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          id: 1,
          name: "水浒传",
          price: 107,
          count: 0,
          total: "",
          c: false,
        },
        {
          id: 2,
          name: "西游记",
          price: 192,
          count: 0,
          total: "",
          c: false,
        },
        {
          id: 3,
          name: "三国演义",
          price: 219,
          count: 0,
          total: "",
          c: false,
        },
        {
          id: 4,
          name: "红楼梦",
          price: 178,
          count: 0,
          total: "",
          c: false,
        },
      ],
      totalPrice: 0,
    };
  },
  methods: {},
  computed: {
    isAll: {
      set(val) {
        console.log(val);
        this.arr.forEach((item) => (item.c = val));
      },
      get() {
        let flag = true;
        this.arr.forEach((item) => {
          if (!item.c) {
            flag = false;
          }
          item.c
            ? (item.total = item.price * item.count)
            : ((item.total = 0), (item.count = 0));
        });
        return flag;
      },
    },
    buy() {
      this.totalPrice = 0;
      this.arr.forEach((item) => (this.totalPrice += item.total));
    },
  },
};
</script>

<style>
ul li {
  list-style: none;
  height: 40px;
  font-size: 30px;
}
span {
  font-size: 30px;
}
#check {
  width: 30px;
  height: 30px;
}
#num {
  width: 100px;
  height: 40px;
}
tr,
th,
td {
  border: 1px solid #7c7c7c !important;
}
i {
  font-style: normal;
  color: #f00;
}
p {
  width: 500px;
}
button {
  float: right;
  width: 100px;
}
</style>